import { useEffect, useState } from 'react'
import { matchRoutes, Outlet, useLocation, useNavigate } from 'react-router-dom'
import { observer } from 'mobx-react'
import { useStore } from '@renderer/store'
import { Layout, Menu, Button } from '@arco-design/web-react'
import {
  IconHome,
  IconBook,
  IconDelete,
  IconSettings,
  IconStar
} from '@arco-design/web-react/icon'
import { globalRouters } from '@renderer/router/index'


const Sider = Layout.Sider
const Content = Layout.Content

const MenuItem = Menu.Item

function AppLayout() {
  const { noteStore } = useStore()

  // const location = useLocation();
  const navigate = useNavigate()

  const [activeKey, setActiveKey] = useState(['home'])

  useEffect(() => {
    noteStore.init()
  }, [])

  const handleClick = (key) => {
    console.log('navigate', key)
    setActiveKey([key])
    navigate(key, { replace: true })
  }

  const handleGoNote = (item) => {
    navigate(`/note?id=${item.id}`, { replace: true })
  }

  // const [noteList, setNoteList] = useState([])
  //
  // useEffect(() => {
  //   getBookmarkList().then(res => {
  //     console.log('文章列表', res)
  //     setNoteList(res)
  //   })
  // }, [activeKey])

  return (
    <Layout>
      <Sider>
        <Menu
          selectedKeys={activeKey}
          onClickMenuItem={handleClick}
        >
          <MenuItem key="home" renderItemInTooltip={() => 'Home'}>
            <IconHome /> Home
          </MenuItem>
          <MenuItem key="notebook" renderItemInTooltip={() => 'Notes'}>
            <IconBook /> Notes
          </MenuItem>
        </Menu>

        <dl className="favorites-list">
          <dt className="favorites-header">
            <IconStar className="icon" />
            Favorites
          </dt>
          {noteStore.bookmarkList.map((item) => {
            return (
              <dd key={item.id} className="fav-item" onClick={() => handleGoNote(item)}>
                {item.title}
              </dd>)
          })}
        </dl>

        <Menu
          selectedKeys={activeKey}
          onClickMenuItem={handleClick}
        >
          <MenuItem key="trash" renderItemInTooltip={() => 'Trash'}>
            <IconDelete /> Trash
          </MenuItem>
          <MenuItem key="setting" renderItemInTooltip={() => 'Setting'}>
            <IconSettings /> Setting
          </MenuItem>
        </Menu>

      </Sider>
      <Content>
        <Outlet />
      </Content>
    </Layout>
  )
}

export default observer(AppLayout)
